<script setup>
	import {
		ref
	} from 'vue';
	import {
		retaDoctorAPI
	} from '../../../apis/doct';

	const form = ref({
		score: 0,
		content: '',
		anonymousFlag: 1,
	})
	const props = defineProps({
		OrderID: String,
		doctorID:String,
	})
    
	
	//是否 匿名评价
	const isnimin = () => {
		form.value.anonymousFlag = Math.abs(form.value.anonymousFlag - 1)
	}

	// 评价提交按钮
	const isShowRate=ref(false)
	const submit = () => {
		uni.showLoading()
		// console.log(props.doctorID.id);
		retaDoctorAPI({
			...form.value,
			orderId: props.OrderID,
			docId: props.doctorID
		}).then((res) => {
			console.log(res);
			uni.showToast({
				title:'感谢评价',
			    icon:'none'
			})
			isShowRate.value=true
		
		}).finally(()=>{
			uni.hideLoading()
		})
	}
</script>


<template>
	<!-- 医生评价 -->
	<view class="doctor-rating">
		<view class="title">医生服务评价</view>
		<view class="subtitle">本次在线问诊服务您还满意吗？</view>
		<view class="rating">
			<uni-rate :disabled="isShowRate" disabledColor="#ffca3e" v-model="form.score" :size="28" margin="12" />
		</view>
		<view class="text">
			<uni-easyinput :disabled="isShowRate" v-model.trim="form.content" type="textarea" maxlength="150" :input-border="false"
				:styles="{ backgroundColor: '#f6f6f6' }" placeholder-style="font-size: 28rpx; color: #979797"
				placeholder="请描述您对医生的评价或是在医生看诊过程中遇到的问题" />
			<text class="word-count"  v-if="!isShowRate">{{ form.content.length }}/150</text>
		</view>
		<view class="anonymous" @click="isnimin"  v-if="!isShowRate">
			<uni-icons v-if="form.anonymousFlag === 0" :size="16" color="#16C2A3" type="checkbox-filled" />
			<uni-icons v-else :size="16" color="#d1d1d1" type="circle" />
			<text class="label">匿名评价</text>
		</view>
		<button v-if="!isShowRate" :disabled='form.score<=0 || form.content ==""' class="uni-button" @click="submit">
			提交
		</button>
	</view>
</template>

<style lang="scss">
	.doctor-rating {
		padding: 30rpx 30rpx 40rpx;
		border-radius: 20rpx;
		background-color: #fff;
		margin-top: 60rpx;

		.title {
			text-align: center;
			font-size: 30rpx;
			color: #121826;
		}

		.subtitle {
			text-align: center;
			font-size: 24rpx;
			color: #6f6f6f;
			margin: 10rpx 0 20rpx;
		}

		.rating {
			display: flex;
			justify-content: center;
		}

		.text {
			padding: 20rpx 30rpx;
			margin-top: 20rpx;
			background-color: #f6f6f6;
			border-radius: 20rpx;
			position: relative;
		}

		:deep(.uni-easyinput__content-textarea) {
			font-size: 28rpx;
		}

		.word-count {
			position: absolute;
			bottom: 20rpx;
			right: 30rpx;
			line-height: 1;
			font-size: 24rpx;
			color: #6f6f6f;
		}

		.anonymous {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 30rpx 0;
			color: #6f6f6f;
			font-size: 24rpx;

			.label {
				margin-left: 6rpx;
			}
		}

		.uni-button[disabled] {
			color: #a6dbd5;
			background-color: #eaf8f6;
		}
	}
</style>